<template>
  <Wmodule title="设备信息" class="m8">
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="item-left">
          <img :src="item.icon" alt="" class="icon" />
        </div>
        <div class="item-right">
          <div class="content">{{ item.value }}</div>
          <div class="title">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </Wmodule>
</template>

<script setup>
import { ref, watch, toRaw } from 'vue'
import Wmodule from '@/components/wmodule/index.vue'

import imgUrl37 from '@/assets/img/37.png'
import imgUrl36 from '@/assets/img/36.png'
import imgUrl35 from '@/assets/img/35.png'
import imgUrl34 from '@/assets/img/34.png'
import imgUrl33 from '@/assets/img/33.png'

const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})

const options = [
  {
    name: '气象监测仪',
    value: 0,
    icon: imgUrl37
  },
  {
    name: '墒情设备',
    value: 0,
    icon: imgUrl36
  },
  {
    name: '孢子捕捉仪',
    value: 0,
    icon: imgUrl35
  },
  {
    name: '虫情监测仪',
    value: 0,
    icon: imgUrl34
  },
  {
    name: '视频监控设备',
    value: 0,
    icon: imgUrl33
  },
  {
    name: '杀虫灯',
    value: 0,
    icon: imgUrl33
  }
]
const list = ref(options)

watch(
  () => props.data,
  (newVal) => {
    const _newVal = toRaw(newVal)
    let _list = []
    for (let i = 0; i < options.length; i++) {
      const row = options[i]
      const _item = _newVal.find((i) => row.name === i.deviceName)
      if (_item) {
        _list.push({
          ...row,
          value: _item.deviceCount
        })
      }
    }

    list.value = _list
  }
)
</script>

<style lang="scss" scoped>
.m8 {
  height: 100%;
}
.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: 22px;
  margin-top: 20px;
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    .item-left {
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 56px;
        height: 54px;
        display: block;
      }
    }
    .item-right {
      .content {
        font-family: DIN;
        font-weight: bold;
        font-size: 22px;
        color: #ffffff;
        line-height: 25px;
      }
      .title {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        line-height: 25px;
      }
    }
  }
}
</style>
